﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MRGSP.SurveyMaster.Core.Model.Question>>" %>

<%@ Import Namespace="MRGSP.SurveyMaster.Localization" %>

<%@ Import Namespace="MRGSP.SurveyMaster.WebUI.Helpers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    EditContent
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        EditContent</h2>
            
   <script type="text/javascript">        
        var AjaxLock = false;
        $(function() {

            setInterval(function () {
                $.get('<%=Url.Action("Index","Ping") %>');
            }, 600000);

            $("#btnAddRoot").click(showAddRootDialog);

            regDialog("divAddRoot", '<%=MUI.add_question %>', addRootResponse, 'json');
            regDialog("divEditRoot", '<%=MUI.edit_question %>', editRootResponse);
            regDialog("divAddQuestion", '<%=MUI.add_question %>', addQuestionResponse);
            regDialog("divEditQuestion", '<%=MUI.edit_question %>', editQuestionResponse);
            regDialog("divAddRow", '<%=MUI.add_row %>', addRowResponse);
            regDialog("divEditRow", '<%=MUI.add_row %>', editRowResponse);
            regDialog("divAddColumn", '<%=MUI.add_column %>', addColumnResponse);
            regDialog("divAddCellElement", '<%=MUI.add_cell %>', addCellElementResponse);

        });    //end document ready

        function regDialog(div, title, postSubmitCallback, dataType) {

            var options = {
                dataType: dataType,
                success: postSubmitCallback,  // post-submit callback
                beforeSubmit: function() {
                    if (AjaxLock == true) return false;

                    v = $("#" + div + " form").validate().form();

                    if (v) {
                        AjaxLock = true;
                        return v;
                    }
                    return false;
                },
                resetForm: true        // reset the form after successful submit
            };

            $("#" + div + " form").ajaxForm(options);

            $("#" + div).dialog({
                title: title,
                width: 600,
                buttons: {
                    "Ok": function() {
                        $("#" + div + " form").submit();
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                    }
                },
                autoOpen: false,
                modal: true
            });
        }

        function addColumn(gridId) {
            $("#divAddColumn").dialog('open');           
            setFocusOnForm("#divAddColumn");
            $("#ColumnGridId").val(gridId);
        }

        function addQuestion(id) {
            $("#divAddQuestion").dialog('open');            
            setFocusOnForm("#divAddQuestion");
            $("#QCParentId").val(id);            
        }

        function addRow(id) {
            $("#divAddRow").dialog('open');         
            setFocusOnForm("#divAddRow");
            $("#RowParentId").val(id);
        }

        function addCellElement(columnId) {
            $("#divAddCellElement").dialog('open');        
            setFocusOnForm("#divAddCellElement");
            $("#CellColumnId").val(columnId);
        }

        function editQuestion(id) {
            $.post('<%=Url.Action("GetQuestion", "Question") %>', { id: id },
            function(data) {
                var ddiv = "#divEditQuestion";               
                $(ddiv).dialog('open');             

                setFocusOnForm(ddiv);
                $("#QEText").val(data.Text);
                $("#QEType").val(data.Type);
                $("#QEId").val(data.Id);
                $("#QEIsMandatory").attr('checked', data.Mandatory);
            }, "json"
            );
        }

        function editRow(id) {
            $.post('<%=Url.Action("GetQuestion", "Question") %>', { id: id },
            function(data) {
                var ddiv = "#divEditRow";
                $(ddiv).dialog('open');

                setFocusOnForm(ddiv);
                $("#RowEditText").val(data.Text);
                $("#RowEditType").val(data.Type);
                $("#RowEditId").val(data.Id);
            }, "json"
            );
        }
        
        function editRoot(id) {
            $.post('<%=Url.Action("GetQuestion", "Question") %>', { id: id },
            function(data) {
                var ddiv = "#divEditRoot";
                $(ddiv).dialog('open');             

                setFocusOnForm(ddiv);                
                $("#REText").val(data.Text);
                $("#REType").val(data.Type);
                $("#REId").val(data.Id);
                $("#REIsMandatory").attr('checked', data.Mandatory);

            }, "json"
            );
        }        

        function deleteQuestion(id) {
            if (AjaxLock == true) return false;
            AjaxLock = true;

            $.post('<%=Url.Action("Delete","Question") %>', { id: id },
                function(data) {
                    if (data.ParentId == null) {
                        $('#qwrap' + data.Id).remove();
                    }
                    else
                        updateQuestionDiv(data.ParentId);
                    AjaxLock = false;
                } //end function(data)
                );//end post delete
        }

        function deleteCellElement(id, gridId) {
            if (AjaxLock == true) return false;
            AjaxLock = true;
            $.post('<%=Url.Action("DeleteColumn","Question") %>', { id: id },
                function(data) {
                    updateQuestionDiv(gridId);
                    AjaxLock = false;
                });
        }

        function deleteColumn(id) {
            if (AjaxLock == true) return false;
            AjaxLock = true;

            $.post('<%=Url.Action("DeleteColumn","Question") %>', { id: id },
                function(data) {
                    updateQuestionDiv(data);
                    AjaxLock = false;
                } //end function(data)
                );    //end post delete                
        }

        function addRootResponse(data) {
            var t;
            $("#bla").before(data.Content);
            t = $("#qwrap" + data.Id);
            t.css("background-color", "#ff1100");
            t.animate({ backgroundColor: "white" }, 500);
            var targetOffset = t.offset().top - 100;
            $('html,body').animate({ scrollTop: targetOffset }, 500, 'jswing');
            $("#divAddRoot").dialog("close");
            AjaxLock = false;
        }

        function editRootResponse(responseText, statusText, xhr, $form) {
            updateQuestionDiv(responseText);
            $("#divEditRoot").dialog("close");
            AjaxLock = false;
        }

        function editQuestionResponse(responseText, statusText, xhr, $form) {
            updateQuestionDiv(responseText);
            $("#divEditQuestion").dialog("close");
            AjaxLock = false;
        }
        
        function editRowResponse(responseText, statusText, xhr, $form) {
            updateQuestionDiv(responseText);
            $("#divEditRow").dialog("close");
            AjaxLock = false;
        }

        function addQuestionResponse(responseText, statusText, xhr, $form) {
            updateQuestionDiv(responseText);
            $("#divAddQuestion").dialog("close");
            AjaxLock = false;
        }

        function addRowResponse(responseText, statusText, xhr, $form) {
            updateQuestionDiv(responseText);
            $("#divAddRow").dialog("close");
            AjaxLock = false;
        }

        function addColumnResponse(responseText, statusText, xhr, $form) {
            updateQuestionDiv(responseText);
            $("#divAddColumn").dialog("close");
            AjaxLock = false;
        }

        function addCellElementResponse(responseText, statusText, xhr, $form) {
            updateQuestionDiv(responseText);
            $("#divAddCellElement").dialog("close");
            AjaxLock = false;
        }

        function showAddRootDialog() {            
            $("#divAddRoot").dialog('open');            
            setFocusOnForm("#divAddRoot");
        }

        function updateQuestionDiv(id) {
            $.post('<%=Url.Action("GetQuestionHtml","Question") %>', { id: id },
                function(data) {
                    $("#qwrap" + id).html(data);
                    var t = $("#qwrap" + id);
                    t.css("background-color", "#11ff00");
                    t.animate({ backgroundColor: "white" }, 2000);
                });
        }
    </script>
    <div class="surveyb">    
    <button id="btnAddRoot"  class="fgb" style="margin-left:20px;" type="button"><span class="ui-icon ui-icon-circle-plus fl">
     </span></button>
    </div>
    <div id="divAddRoot">
        <% Html.RenderAction("AddRoot", "Question", new { surveyId = ViewData["survey"] }); %>
    </div>
    <div id="divAddQuestion">
        <% Html.RenderAction("AddQuestion", "Question", new { surveyId = ViewData["survey"] }); %>
    </div>
    <div id="divEditRoot">
        <% Html.RenderAction("EditRoot", "Question"); %>
    </div>
    <div id="divEditQuestion">
        <% Html.RenderAction("EditQuestion", "Question"); %>
    </div>
    <div id="divEditRow">
        <% Html.RenderAction("EditRow", "Question"); %>
    </div>
    <div id="divAddColumn">
        <% Html.RenderAction("AddColumn", "Question"); %>
    </div>
    <div id="divAddCellElement">
        <% Html.RenderAction("AddCellElement", "Question", new { surveyId = ViewData["survey"] }); %>
    </div>
    <div id="divAddRow">
        <% Html.RenderAction("AddRow", "Question", new { surveyId = ViewData["survey"] }); %>
    </div>
    <%=Html.SurveyCreator(Model) %>
    <div id="bla">
    </div>
</asp:Content>
